<template>
  <van-tabbar route>
    <van-tabbar-item replace to="/home" icon="home-o">
      <span>抽盒</span>
      <template #icon="props">
        <img :src="props.active ? homeIcon.active : homeIcon.inactive" />
      </template>
    </van-tabbar-item>
    <van-tabbar-item
      replace
      to="/cashCoupon"
      icon="search"
      :badge="couponCount"
      v-if="couponCount"
    >
      <span>现金券</span>
      <template #icon="props">
        <img :src="props.active ? cashIcon.active : cashIcon.inactive" />
      </template>
    </van-tabbar-item>
     <van-tabbar-item v-if="!couponCount"
      replace
      to="/cashCoupon"
      icon="search"
    >
      <span>现金券</span>
      <template #icon="props">
        <img :src="props.active ? cashIcon.active : cashIcon.inactive" />
      </template>
    </van-tabbar-item>
    <van-tabbar-item replace to="/mine" icon="search" 
      :badge="boxCouponCount" v-if="boxCouponCount"> 
      <span>我的</span>
      <template #icon="props">
        <img :src="props.active ? mineIcon.active : mineIcon.inactive" />
      </template>
    </van-tabbar-item>
    <van-tabbar-item replace to="/mine" icon="search" v-if="!boxCouponCount"> 
      <span>我的</span>
      <template #icon="props">
        <img :src="props.active ? mineIcon.active : mineIcon.inactive" />
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>

<script>
import { Tabbar, TabbarItem } from "vant";
import { mapGetters } from "vuex";
import apBox from "@/common/api/apBox";
export default {
  name: "TabbarCustom",
  components: {
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
  },
  props: {
    tabTitle: {
      type: String,
      default: "",
    },
    active: {
      type: String,
      default: "",
    },
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  data() {
    return {
      title: "",
      homeIcon: {
        active: require("../common/imgs/home-active-icon.png"),
        inactive: require("../common/imgs/home-icon.png"),
      },
      cashIcon: {
        active: require("../common/imgs/cash-active-icon.png"),
        inactive: require("../common/imgs/cash-icon.png"),
      },
      mineIcon: {
        active: require("../common/imgs/mine-active-icon.png"),
        inactive: require("../common/imgs/mine-icon.png"),
      },
      couponCount: 0,//现金券数量
      boxCouponCount: 0, //抽盒券数量
    };
  },
  created() {
    this.title = this.tabTitle;
    this.currActive = this.active;
    this.getNavNum();
  },
  methods: {
    getNavNum() {
      this.$toast.loading();
      apBox
        .getNavNum({
          userId: this.userInfo.userId,
        })
        .then((data) => {
          this.$toast.clear();
          this.couponCount = data.data.cashCouponCount;
          this.boxCouponCount = data.data.boxCouponCount;
        });
    },
  },
};
</script>

<style scoped lang="less">
</style>
